<template>
    这是首页

    <el-alert title="success alert" type="warning" />
    <el-button @click="open">弹出</el-button>

    <el-button @click="msgBox">点击打开消息弹出框</el-button>

    <el-button @click="dialogFormVisible = true">打开一个表单对话框</el-button>

    <el-dialog v-model="dialogFormVisible" title="创建用户">
      <el-form :model="form">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>

</template>

<script>
    export default {
        name: "Dashboard",
        data() {
            return {
                dialogFormVisible: false, // 显示与隐藏
                form: {
                    name: '',
                    age: '',
                    sex: ''
                },
            }
        },
        methods: {
            open() {
                this.$message.success('登录成功')
            },

            msgBox() {
                this.$messageBox.confirm(
                  '你确认要删除这个吗？',
                  '提示',
                  {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                  }
                )
                  .then(() => {
                    this.$message({
                      type: 'success',
                      message: '删除成功',
                    })
                  })
                  .catch(() => {
                    this.$message({
                      type: 'info',
                      message: '删除取消',
                    })
                  })
              }

        }
    }
</script>

<style scoped>

</style>